<template>
	<view class="content">
		<scroll-view class="scroll-content" scroll-y v-if="detailData.resourceDTO.resourceType == '1'">
				<view class="title">
					<text>{{detailData.subName}}</text>
					
				</view>
				<rich-text :nodes="detailData.htmlNodes"></rich-text>
		</scroll-view>
		<view class="audio-wrapper" v-if="detailData.resourceDTO.resourceType == '2'">
			<custom-audio :list="[{url:detailData.url}]"></custom-audio>
		</view>
		<view class="video-wrapper" v-if="detailData.resourceDTO.resourceType == '3'">
			<video 
				class="video"
				:src="detailData.url" 
				controls
				objectFit="fill"
				autoplay
			></video>
		</view>
		<view class="ebook-wrapper" v-if="detailData.resourceDTO.resourceType == '4'">
			<!-- #ifdef H5 -->
			<object :data="detailData.url" type="text/plain" v-if="detailData.extName=='txt'"></object>
			<object :data="detailData.url" type="application/pdf" v-if="detailData.extName=='pdf'"></object>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<web-view :src="detailData.url"></web-view>
			<!-- #endif -->
		</view>
		<view class="container" v-show="loading === false">
			<!-- 推荐 -->
			<view class="s-header">
				<text class="tit">相关推荐</text>
			</view>
			<resource-list :resourceList="resourceList" :cols="1"></resource-list>
		</view>
	</view>
</template>

<script>
	import json from '@/Json';
	import htmlParser from '@/config/html-parser'
	import resourceList from '@/components/resource-list.vue'
	import customAudio from '@/components/custom-audio-play.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			resourceList,
			customAudio
		},
		data() {
			return {
				loading: true,
				id: '',
				detailData: {
					resourceDTO: {}
				},
				resourceList:[]
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo', 'footPrint', 'applicationConfig'])
		},
		onLoad(options) {
			var id = options.id;
			this.inquirySubResource(id);
			this.searchRecommendResource();
		},
		methods: {
			inquirySubResource(id) {
				let that = this;
				this.loading = true;
				this.$api.request.inquirySubResource({
					resourceSubUuid: id
				}, function(res) {
					if (res.body.status.statusCode === '0') {
						that.detailData = res.body.data;
						if (that.detailData.resourceDTO.resourceType == '1') {
							var content = that.detailData.subContent;
							content = content.replace(/<!DOCTYPE html>/g, "").replace(/<html>/g, "").replace(
								/<\/html>/g, "").replace(/<head>/g, "").replace(/<\/head>/g, "").replace(
								/<body>/g, "").replace(/<\/body>/g, "")
							that.detailData.htmlNodes = htmlParser(content);
						}
						// else if (that.detailData.resourceDTO.resourceType == '4'){
						// 	uni.downloadFile({
						// 	  url: that.detailData.url,
						// 	  success: function (res) {
						// 	    var filePath = res.tempFilePath;
						// 	    uni.openDocument({
						// 	      filePath: filePath,
						// 	      showMenu: true,
						// 	      success: function (res) {
						// 	      }
						// 	    });
						// 	  }
						// 	});
						// }
						that.loading = false;
					}
				})
			},
			searchRecommendResource() {
				let that = this;
				let searchData={
					keyArray:['IS_RECOMMEND'],
					recommend: true,
					startIndex: 0,
					pageSize: 10
				}
				that.$api.request.searchResource(searchData, res => {
					if (res.body.status.statusCode === '0') {
						this.resourceList = res.body.data.resourceList;
					} else {
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background: $bg-color-light;
	}

	.content {
		display: flex;
		flex-direction: column;
		height: 90%;
		margin: 0 $page-row-spacing;
		// background: #fff;
	}

	.video-wrapper {
		height: 422upx;

		.video {
			width: 100%;
			height: 422upx;
		}
	}
	.audio-wrapper {
		height: 422upx;
	
		.audio {
			width: 100%;
		}
	}

	.scroll {
		flex: 1;
		position: relative;
		// background-color: #f8f8f8;
		height: 0;
	}

	.scroll-content {
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.title{
		color: $font-color-dark;
		font-weight: bold;
		font-size: $font-lg;
		text-align: center;
		padding: 40upx 0;
	}
	.container{
		margin-top: 40upx;
	}
	.s-header{
		font-weight: bold;
		color: $font-color-dark;
		font-size: $font-lg;
		height: 60upx;
		line-height: 60upx;
		margin: 20upx;
	}

</style>